<template>
	<HTableControlSearch
		v-if="props.tableSearch.filter(v => !v.isHide).length > 0"
		:isShowSearch="state.isShowSearch"
		:tableSearch="props.tableSearch"
		@search="(data, isReset = false) => $emit('search', data, isReset)"
	/>
	<div class="table-control-container mb10">
		<!-- 左侧 -->
		<div class="operation-box">
			<el-tooltip placement="top" content="刷新表格">
				<el-button color="#409eff" :size="themeConfig.globalComponentSize" @click="$emit('refresh')">
					<HIcon name="fa fa-refresh" class="icon-btn" color="#fff" :size="16" />
				</el-button>
			</el-tooltip>
			<slot name="operationBtn"></slot>
		</div>
		<!-- 右侧 -->
		<div class="tool-box">
			<div class="tool-input-group mr15">
				<slot name="quickSearch"></slot>
			</div>
			<div class="tool-btn-group">
				<el-tooltip placement="top" :content="state.isShowSearch ? '关闭搜索' : '展开搜索'">
					<el-button
						class="tool-btn border-right"
						plain
						:size="themeConfig.globalComponentSize"
						@click="onShowSearch"
					>
						<HIcon class="icon-btn" name="fa fa-search" color="#606266" :size="16" />
					</el-button>
				</el-tooltip>
				<!-- <el-tooltip placement="top" content="导出表格">
					<el-button
						class="tool-btn border-right"
						plain
						:size="themeConfig.globalComponentSize"
						@click="onExportTable"
					>
						<HIcon class="icon-btn" name="fa fa-cloud-download" color="#606266" :size="16" />
					</el-button>
				</el-tooltip> -->
				<el-tooltip placement="top" content="表格设置">
					<el-button ref="settingIconRef" class="tool-btn" plain :size="themeConfig.globalComponentSize">
						<HIcon class="icon-btn" name="fa fa-th" color="#606266" :size="16" />
					</el-button>
				</el-tooltip>
				<el-popover
					ref="settingRef"
					:virtual-ref="settingIconRef"
					virtual-triggering
					trigger="click"
					placement="bottom-end"
					transition="el-zoom-in-top"
					popper-class="table-tool-popper"
					width="300"
					persistent
					@show="onSetTable"
				>
					<template #default>
						<div class="tool-box">
							<el-tooltip content="拖动下方的箭头图标进行排序" placement="top-start">
								<HIcon name="fa fa-question-circle-o" :size="17" class="ml11" color="#909399" />
							</el-tooltip>
							<el-checkbox
								v-model="state.checkListAll"
								:indeterminate="state.checkListIndeterminate"
								class="ml10 mr1"
								label="列显示"
								@change="onCheckAllChange"
							/>
							<el-checkbox v-model="config.isSerialNo" class="ml12 mr1" label="序号" />
							<el-checkbox v-model="config.isSelection" class="ml12 mr1" label="多选" />
							<el-checkbox v-model="config.isBorder" class="ml12 mr1" label="边框" />
						</div>
						<el-scrollbar>
							<div ref="toolSetRef" class="tool-sortable">
								<div class="tool-sortable-item" v-for="v in props.header" :key="v.key" :data-key="v.key">
									<i class="fa fa-arrows-alt handle cursor-grab"></i>
									<el-checkbox
										v-model="v.isCheck"
										size="default"
										class="ml12 mr8"
										:label="v.title"
										@change="onCheckChange"
									/>
								</div>
							</div>
						</el-scrollbar>
					</template>
				</el-popover>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="tableControl">
import { defineAsyncComponent, reactive, ref, nextTick } from "vue";
import { ElMessage } from "element-plus";
import { storeToRefs } from "pinia";
import { useThemeConfig } from "/@/stores/themeConfig";
import table2excel from "js-table2excel";
import Sortable from "sortablejs";
import "/@/theme/tableTool.scss";

// 引入组件
const HTableControlSearch = defineAsyncComponent(() => import("/@/components/table/tableControlSearch.vue"));

// 定义父组件传过来的值
interface TableControlProps {
	config: TableConfigType; // 配置项
	header: TableHeaderType[]; // 表头内容
	selectedRows: EmptyObjectType[]; // 表格选中行
	tableSearch: TableSearchType[]; // 搜索表单配置项
}
const props = defineProps<TableControlProps>();

// 定义父组件可触发的事件
const emit = defineEmits(["refresh", "search", "sort"]);

// 定义变量内容
const settingIconRef = ref();
const toolSetRef = ref();
const { themeConfig } = storeToRefs(useThemeConfig());
const state = reactive({
	isShowSearch: false,
	checkListAll: true,
	checkListIndeterminate: false,
});

// 展开收起搜索栏
const onShowSearch = () => {
	state.isShowSearch = !state.isShowSearch;
};
// 导出
const onExportTable = () => {
	if (props.selectedRows.length <= 0) return ElMessage.warning("请先选择要导出的数据");
	table2excel(
		props.header
			.filter(v => v.isCheck)
			.map(item => {
				item.type = ["text", "image"].includes(item.type) ? item.type : "text";
				return item;
			}),
		JSON.parse(JSON.stringify(props.selectedRows)),
		`${document.title} ${new Date().toLocaleString()}`
	);
};
// 设置 - 初始化可拖动列表
const onSetTable = () => {
	nextTick(() => {
		const sortable = Sortable.create(toolSetRef.value, {
			handle: ".handle",
			dataIdAttr: "data-key",
			animation: 150,
			onEnd: () => {
				const headerList: TableHeaderType[] = [];
				sortable.toArray().forEach(val => {
					props.header.forEach(v => {
						if (v.key === val) headerList.push({ ...v });
					});
				});
				emit("sort", headerList);
			},
		});
	});
};
// 设置 - 列显示全选改变时
const onCheckAllChange = <T>(val: T) => {
	if (val) props.header.forEach(v => (v.isCheck = true));
	else props.header.forEach(v => (v.isCheck = false));
	state.checkListIndeterminate = false;
};
// 设置 - 列显示当前项改变时
const onCheckChange = () => {
	const headers = props.header.filter(v => v.isCheck).length;
	state.checkListAll = headers === props.header.length;
	state.checkListIndeterminate = headers > 0 && headers < props.header.length;
};
</script>

<style scoped lang="scss">
.table-control-container {
	flex-shrink: 0;
	display: flex;
	.icon-btn {
		margin: 0;
	}
	.tool-box {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		.tool-input-group {
			display: flex;
			align-items: center;
		}
		.tool-btn-group {
			border: 1px solid var(--el-border-color);
			border-radius: var(--el-border-radius-base);
			overflow: hidden;
			button:hover {
				color: #606266;
				background-color: var(--el-color-info-light-7);
			}
			.el-button + .el-button {
				margin: 0;
			}
			.tool-btn {
				border: none;
				border-radius: 0;
			}
			.border-right {
				border-right: 1px solid var(--el-border-color);
			}
		}
	}
}
</style>
